<template>
  <!-- 模板7 -->
  <div class="c-w100" v-if="(themeName == 'mb7' && isFromM7) || isMicroPage">
    <!-- 一行一列 -->
    <template v-if="itemType == 1">
      <div class="c-pv20" @click="clickGoEbooksDetail(item.id)" v-for="(item, index) in ebooksList" :key="index">
        <div class="c-bg-white c-flex-row c-br16" :class="isSetPageBackground ? 'c-pv12 c-ph12' : ''">
          <div class="c-ww120 c-maxh180 c-text-hidden c-br16 c-p">
            <img class="c-w100 c-br16" :src="$addXossFilter(item.cover)" alt="">
            <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
          </div>
          <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-pl20">
            <div class="c-fs24 c-text-ellipsis1 c-wordBreakAll c-fw-b">
              {{item.name}}
            </div>
            <div class="c-fs20 c-fc-sblack c-text-ellipsis1">{{item.author}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-fs0">
              <div class="c-flex-row  c-aligni-end c-flexw-wrap">
                <div v-if="visible.priceVisible" class="theme-fc c-lh c-mr10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
                <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-lh22 c-fs18 c-fc-gray c-text-decoration-through">￥{{ item.crossedPrice }}</div>
              </div>
              <div v-if="visible.dataVisible && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom)))" class="c-fs18 c-fc-sblack c-lh c-flex-shrink0">{{item.viewNum | formatNumber}}次阅读</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 一行三列 -->
    <template v-if="itemType == 3">
      <div class="c-pt24 c-pb12">
        <div class="c-flex-row c-flexw-wrap c-pv12 c-bg-white c-br16 c-text-hidden" :class="isSetPageBackground ? 'c-ph12' : ''">
          <div class="c-pt24 c-pb14" @click="clickGoEbooksDetail(item.id)" :class="[(index + 1) % 3 == 0 ? '' : 'c-mr24', isSetPageBackground ? 'ww172' : 'c-ww180']" v-for="(item, index) in ebooksList" :key="index">
            <div class="c-flex-column c-bg-white c-br16 c-pb10">
              <div class="c-p c-w100 c-maxh270 c-br16 c-text-hidden">
                <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
                <img class="c-w100 c-block c-br16" :src="$addXossFilter(item.cover)" alt="">
                <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings" v-if="visible.dataVisible && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom)))">{{item.viewNum | formatNumber}}次阅读</div>
              </div>
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt16 c-fw-b c-ph10">{{item.name}}</div>
              <div class="c-fs20 c-fc-sblack c-mt10 c-text-ellipsis1 c-ph10">{{item.author}}</div>
              <div class="c-ph10">
                <div v-if="visible.priceVisible" class="theme-fc c-lh c-mt10 c-mr10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
                <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-pl4 c-mt4 c-fs18 c-fc-gray c-text-decoration-through">￥{{ item.crossedPrice }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="itemType == 5">
      <div class="c-pt20 c-pb10">
        <div :class="isSetPageBackground ? 'c-ph12 c-pv12 c-bg-white c-br16 c-text-hidden' : ''">
          <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n">
            <div class="c-inlineblack c-vcAlign-top c-ww160 c-mr20 c-bg-white c-br16 c-pb10" @click="clickGoEbooksDetail(item.id)" v-for="(item, index) in ebooksList" :key="index">
              <div class="c-w100 c-maxh240 c-text-hidden c-br16 c-p">
                <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
                <img class="c-w100 c-maxh240" :src="$addXossFilter(item.cover)" alt="">
                <div class="c-pa c-p-b0 c-p-l0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings" v-if="visible.dataVisible && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom)))">{{item.viewNum | formatNumber}}次阅读</div>
              </div>
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt16 c-fw-b c-ph10">{{item.name}}</div>
              <div class="c-fs20 c-fc-sblack c-mt10 c-text-ellipsis1 c-ph10">{{item.author}}</div>
              <div class="c-ph10">
                <div v-if="visible.priceVisible" class="theme-fc c-lh c-mt10 c-mr10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
                <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-mt4 c-fs18 c-fc-gray c-text-decoration-through">￥{{ item.crossedPrice }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="itemType == 4">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="c-flex-column c-w100 c-pv20" @click="clickGoEbooksDetail(item.id)" v-for="(item, index) in ebooksList" :key="index">
          <div class="c-br16 c-bg-white c-text-hidden">
            <div class="c-w100 c-maxh592 c-text-hidden c-p" :class="!isSetPageBackground ? 'c-br16' : ''">
              <img class="c-w100" :src="$addXossFilter(item.cover)"/>
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
              <div class="c-pa c-p-b0 c-p-r0 c-w100 c-hh36 c-lh36 c-fs20 c-fc-white readings" v-if="visible.dataVisible && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom)))">{{item.viewNum | formatNumber}}次阅读</div>
            </div>
            <div :class="!isSetPageBackground ? 'c-ph10' : 'c-ph20'" class="c-pb20">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt16 c-fw-b">{{item.name}}</div>
              <div class="c-flex-row c-justify-sb c-aligni-center c-mt10">
                <div class="c-flex-row  c-aligni-end c-flexw-wrap">
                  <div v-if="visible.priceVisible" class="theme-fc c-lh c-mt10 c-mr10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
                  <div v-if="isShowCrossedPrice(item.crossedPrice)" class="c-lh22 c-fs18 c-fc-gray c-text-decoration-through c-mt10">￥{{ item.crossedPrice }}</div>
                </div>
                <div class="c-fs20 c-fc-sblack c-mt10 c-text-ellipsis1">{{item.author}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div v-if="showMore && ![3, 4, 5].includes(itemType)" class="c-fs20 c-textAlign-c c-pv16" :class="pageTextColor ? 'pageTextColor' : 'c-fc-sblack'" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
  </div>
  <!-- 模板6 -->
  <div class="c-ph24 c-pt24 c-pb20 c-mt12 c-bg-white" v-else-if="themeName == 'mb6' && !isMicroPage">
    <div class="c-flex-row c-aligni-end c-mb10">
      <span class="c-fs28 c-fw-b">{{ebooksName}}</span>
      <span class="c-fs20 c-fc-gray c-mb2 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ebooksDesc}}</span>
      <span class="c-fs18 c-fc-gray" @click="clickMoreEbooks">更多</span>
    </div>
    <div class="c-flex-row c-flexw-wrap">
      <div class="c-flex-column c-ww160 c-pv24" @click="clickGoEbooksDetail(item.id)" :class="index % 3 == 0 ? '' : 'c-ml56'" v-for="(item, index) in ebooksList" :key="index">
        <div class="c-p c-ww160 c-maxh240 c-br10 c-text-hidden">
          <vip-status :item="item"></vip-status>
          <img class="c-ww160 c-block c-maxh2400 c-br10" :src="$addXossFilter(item.cover)" alt="">
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-pa c-p-b0 c-p-l0 c-ww160 c-hh36 c-lh36 c-fs20 c-fc-white readings">{{item.viewNum | formatNumber}}次阅读</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt18">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.author}}</div>
        <div class="theme-fc c-lh c-mt10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
      </div>
    </div>
  </div>
  <!-- 模板5 -->
  <div class="c-ph24 c-pv24 c-bd-b1" v-else-if="themeName == 'mb5' && !isMicroPage">
    <div class="c-flex-row c-aligni-center">
      <span class="c-fs30">{{ebooksName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ebooksDesc}}</span>
      <span class="c-fs20 c-fc-gray" @click="clickMoreEbooks">更多</span>
    </div>
    <div class="c-flex-row c-flexw-wrap">
      <div class="c-flex-column c-ww160 c-pv24" @click="clickGoEbooksDetail(item.id)" :class="index % 3 == 0 ? '' : 'c-ml56'" v-for="(item, index) in ebooksList" :key="index">
        <div class="c-p c-ww160 c-maxh240 c-br10 c-text-hidden">
          <vip-status :item="item"></vip-status>
          <img class="c-ww160 c-block c-br10 c-maxh240" :src="$addXossFilter(item.cover)" alt="">
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-pa c-p-b0 c-p-l0 c-ww160 c-hh36 c-lh36 c-fs20 c-fc-white readings">{{item.viewNum | formatNumber}}次阅读</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt18">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.author}}</div>
        <div class="theme-fc c-lh c-mt10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
      </div>
    </div>
  </div>
  <!-- 模板4 -->
  <div class="c-ph24 c-bd-b12-f5" v-else-if="themeName == 'mb4' && !isMicroPage">
    <div class="c-pt40 c-flex-row c-aligni-center">
      <span class="c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{ebooksName}}</span>
      <span class="c-fs18 c-fc-sgray c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{ebooksDesc}}</span>
      <span class="c-fs20 c-fc-gray c-pl8" @click="clickMoreEbooks">查看更多</span>
    </div>
    <div class="c-flex-row c-flexw-wrap">
      <div class="c-flex-column c-ww160 c-pv24" @click="clickGoEbooksDetail(item.id)" :class="index % 3 == 0 ? '' : 'c-ml56'" v-for="(item, index) in ebooksList" :key="index">
        <div class="c-p c-ww160 c-maxh240 c-br10 c-text-hidden">
          <vip-status :item="item"></vip-status>
          <img class="c-ww160 c-block c-br10 c-maxh240" :src="$addXossFilter(item.cover)" alt="">
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-pa c-p-b0 c-p-l0 c-ww160 c-hh36 c-lh36 c-fs20 c-fc-white readings">{{item.viewNum | formatNumber}}次阅读</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt18">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.author}}</div>
        <div class="theme-fc c-lh c-mt10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
      </div>
    </div>
  </div>
  <!-- 模板3 -->
  <div class="c-w100" v-else-if="themeName == 'mb3' && !isMicroPage">
    <index-three-title-com :titleName="ebooksName" :titleDesc="ebooksDesc" @clickMore="clickMoreEbooks"></index-three-title-com>
    <div class="c-flex-row c-flexw-wrap c-ph24 c-pb20 c-bd-b12-f5">
      <div class="c-flex-column c-ww160 c-pv24" @click="clickGoEbooksDetail(item.id)" :class="index % 3 == 0 ? '' : 'c-ml56'" v-for="(item, index) in ebooksList" :key="index">
        <div class="c-p c-ww160 c-maxh240 c-br10 c-text-hidden">
          <vip-status :item="item"></vip-status>
          <img class="c-ww160 c-block c-br10 c-maxh240" :src="$addXossFilter(item.cover)" alt="">
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-pa c-p-b0 c-p-l0 c-ww160 c-hh36 c-lh36 c-fs20 c-fc-white readings">{{item.viewNum | formatNumber}}次阅读</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-mt18">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.author}}</div>
        <div class="theme-fc c-lh c-mt10 c-fw-b" :class="[1, 3].includes(item.payType) ? 'c-fs22' : 'c-fs24'"><span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import indexThreeTitleCom from "@/components/templates/common/indexThreeTitleCom.vue";
import { utilJs } from "@/utils/common.js"
import vipStatus from '@/components/templates/common/vipStatus.vue'
export default {
  name: 'IndexBook',
  components: {
    indexThreeTitleCom,
    vipStatus
  },
  props: {
    ebooksName: {
      type: String,
      default: '电子书'
    },
    ebooksDesc: {
      type: String,
      default: '电子书'
    },
    ebooksList: {
      type: Array,
      default: () => []
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    showCount: {
      type: Number,
      default: 1
    },
    isMicroPage: {
      type: Boolean,
      default: false
    },
    showMore: {
      type: Boolean,
      default: false
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格(营销活动的划线价格，划线的是产品没参加营销活动时的购买价)
          crossedPriceVisible:true, // 划线价格（产品的划线价格，只作展示，不作为售卖价）
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem("themeName") ? localStorage.getItem("themeName") : "mb5",
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
      ckFrom: global.ckFrom.ebooks,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    }
  },
  methods: {
    isShowCrossedPrice(crossedPrice) {
      return !this.$isWxAppIos() && this.visible.crossedPriceVisible && crossedPrice && Number(crossedPrice) > 0;
    },
    clickMore() {
      this.$emit('clickMore')
    },
    clickMoreEbooks() {
      let toPath = `/homePage/ebooks/ebooksList`;
      this.iosAppRouteChange(toPath);
    },
    clickGoEbooksDetail(id) {
      let toPath = `/homePage/ebooks/ebooksDetail?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
  }
}
</script>

<style scoped>
.c-maxh240 {
  max-height: 6rem;
}
.c-ml56 {
  margin-left: 1.4rem;
}
.c-ww96 {
  width: 2.4rem;
}
.c-maxh144 {
  max-height: 3.6rem;
}
.readings {
  padding: 0 0.25rem;
  opacity: 0.9;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.theme-bd-r2 {
  border-right: 2px solid #ff300c;
}
.ww172 {
  width: 4.3rem;
}
</style>